<template>
  <div class="box">
    <div class="title">
      <p>游客消费分析图</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts" name="Counter">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
let charts = ref()
onMounted(() => {
  let myChart = echarts.init(charts.value)
  myChart.setOption({
    // 标题
    title: {
      // 文本
      text: '今日游客消费分析图',
      // 位置
      right: '70px',
      // 样式
      textStyle: {
        color: '#fff',
        fontSize: 20,
      },
    },
    // 悬浮提示框
    tooltip: {
      // 触发方式
      trigger: 'item',
      // 背景色
      backgroundColor: 'white',
      // 字体颜色
      textStyle: {
        fontSize: 18,
        color: '#666',
      },
    },
    // 图例组件
    legend: {
      // 位置
      right: '40',
      top: 'center',
      // 组件方向为垂直
      orient: 'vertical',
      // 文本样式
      textStyle: {
        color: 'white',
        fontSize: 20,
        lineHeight: 30,
      },
    },
    series: [
      // 饼图
      {
        name: '游客消费分析',
        type: 'pie',
        radius: ['40%', '80%'],
        // 位置
        center: ['40%', '55%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        // 标签
        label: {
          show: false,
          position: 'center',
        },
        // 高亮状态的扇区和标签样式。
        emphasis: {
          // 显示标签
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
            color: '#fff',
          },
        },
        // 标签的视觉引导线配置
        labelLine: {
          show: false,
        },
        // 数据配置
        data: [
          { value: 848, name: '美食' },
          { value: 735, name: '住宿' },
          { value: 380, name: '服装' },
          { value: 484, name: '纪念品' },
          { value: 300, name: '交通' },
        ],
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  .title {
    margin-left: 15px;
    p {
      font-size: 20px;
      color: #fff;
    }
  }
  .charts {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>
